<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>vue实现留言板</title>
    <script src="../vue.js"></script>
</head>
<body>
    <!-- 不用双向绑定实现 -->
    <!-- <div id="messageBoard">
        <div>
            <input type="text" name="" id="" @input="messageInput" >
            <button @click="pushList()">add</button>
        </div>
        <ul>
            <li v-for="item,index in list">
                {{ item }}
            </li>
        </ul>
    </div>
    <script>
        let obj = {
            data(){
                return {
                    mytext:'',
                    list:['第一条评论','第二条评论'],
                }
            },
            methods: {
                pushList(){
                    this.list.push(this.mytext);
                },
                messageInput(e){
                    this.mytext = e.target.value;
                },
            },
        }
        let app = Vue.createApp(obj).mount('#messageBoard')
    </script> 
-->
    <!-- 双向绑定实现评论 -->
    <div id="messageBoard">
        <div>
            <!-- v-model实现双向绑定 引号部分为变量名,只要该变量发生改变,它就会立即更新到最新的内容 -->
            <input type="text" v-model="mytext">
            <button @click="pushList()">add</button>
        </div>
        <ul>
            <li v-for="item,index in list">
                {{item}}
                <button @click="handleDel(index)">del</button>
            </li>
        </ul>
        <div v-if="list.length===0?true:false">还没有人进行评论哦,快来评论吧!</div>
    </div>
    <script>
        let obj = { 
            data(){
                return {
                    list:['第一条评论','第二条评论'],
                }
            },
            methods: {
                pushList(){
                    this.list.push(this.mytext);
                },
                handleDel(index){
                    this.list.splice(index,1);
                },
            },
        }
        let app = Vue.createApp(obj).mount('#messageBoard')
    </script>
</body>
</html>